<div class="sortable-container">

    <div id="example1">

        <button onclick="$('#selectedUsers').sortable('enable')" type="button">Enable</button>
        <button onclick="$('#selectedUsers').sortable('disable')" type="button">Disable</button>
        <button onclick="alert($('#selectedUsers').sortable('serialize'))" type="button">Serialize!</button>
        <button onclick="alert($('#selectedUsers').sortable('toArray'))" type="button">ID's to Array!</button>

        <br><br>

        <div id="sortable-ex" style="min-height: 110px; min-height:110px; height: auto !important;">

            <div style="float: left;">
                Selected users
                <ul id="selectedUsers" style="cursor: hand; cursor: pointer;">
                    <li id='user_Susan'>Susan</li>
                    <li id='user_Beth'>Beth</li>
                    <li id='user_Bob'>Bob</li>
                    <li id='user_Edward'>Edward</li>
                    <li id='user_Kate'>Kate</li>
                </ul>
            </div>

            <div style="float: left; margin-left: 50px;">
                User list
                <ul id="userList" style="cursor: hand; cursor: pointer;">
                    <li id='user_Jack'>Jack</li>
                    <li id='user_John'>John</li>
                    <li id='user_Marry'>Marry</li>
                    <li id='user_Claire'>Claire</li>
                    <li id='user_Daniel'>Daniel</li>
                </ul>
            </div>

            <br style="clear: both;">

        </div>
    </div>
</div>